import React, { useState, useEffect } from 'react';
import {List, Card} from 'antd';
import Meta from "antd/es/card/Meta"; // 假设使用的是Ant Design for React

interface Props {
  pictureList?: API.Picture[];
}

const PictureList: React.FC<Props> = (props) => {
  const defaultPostList: any[] = [];
  const [pictureList, setPictureList] = useState<API.Picture[]>(props.pictureList || defaultPostList);

  useEffect(() => {
    setPictureList(props.pictureList || defaultPostList);
  }, [props.pictureList]);

  return (
    <List
      grid={{ gutter: 16, column: 4 }}
      itemLayout="vertical"
      dataSource={pictureList}
      renderItem={(item) => (
          <Card
            hoverable
            style={{ width: 240 }}
            cover={
              <img alt="example" src={item.url} />
            }
          >
            <Meta title={item.title} />
          </Card>
      )}
    />
  );
};

export default PictureList;
